<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('服务商基本信息')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: cropbox-css" />
</head>
<body>
<div class="main-content" >
    <div class="tabs-left">
        <div class="tab-content ">
            <div id="tab-8" class="tab-pane active">
                <div class="panel-body">
                    <fieldset id="f">
                        <input type="hidden" id="types" th:value="${type}">
                        <form id="form-agent-add" class="form-horizontal">
                            <input type="hidden" name="agentNum" id="agentNum" th:value="${agentInfo.agentNum}">
                            <h4 class="form-header h4">基本信息</h4>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">服务商名称：</label>
                                        <div class="col-sm-8">
                                            <input name="agentName" th:value="${agentInfo.agentName}" class="form-control"  type="text" maxlength="30"  >
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">统一社会信用代码:</label>
                                        <div class="col-sm-8">
                                            <input name="organCode"  th:value="${agentInfo.organCode}" placeholder="" class="form-control"  type="text" maxlength="18"  >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">服务商地区：</label>
                                        <div class="col-sm-3" style="width: 130px;">
                                            <select id="province" name="province"  onchange="javascript:window.province('p')" class="province form-control m-b" >
                                                <option th:each="p:${pList}" th:text="${p.areaName}" th:value="${p.areaCode}"  th:selected="${p.areaCode} eq ${agentInfo.province}"></option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3" style="width: 130px;">
                                            <select id="city" name="city" onchange="javascript:window.province('c')" class="city form-control m-b" >
                                                <option th:each="c:${cList}" th:text="${c.areaName}" th:value="${c.areaCode}" th:selected="${c.areaCode} eq ${agentInfo.city}"></option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3" style="width: 128px;">
                                            <select id="area" name="area" onchange="javascript:window.province('a')" class="area form-control m-b" >
                                                <option th:each="a:${aList}" th:text="${a.areaName}" th:value="${a.areaCode}" th:selected="${a.areaCode} eq ${agentInfo.area}"></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">详细地址：</label>
                                        <div class="col-sm-8">
                                            <input name="agentArea" th:value="${agentInfo.agentArea}" placeholder="" class="form-control"  type="text" maxlength="40"  required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">法人名称：</label>
                                        <div class="col-sm-8">
                                            <input name="commissary" onkeyup='value=value.replace(/[\d]/g,"")' th:value="${agentInfo.commissary}" placeholder="" class="form-control"  type="text" maxlength="10" readonly required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">法人身份证号码：</label>
                                        <div class="col-sm-8">
                                            <input name="showIdentitynum"  th:value="${agentInfo.showIdentitynum}"  readonly placeholder="" class="form-control"  type="text"  maxlength="18"   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">联系人姓名：</label>
                                        <div class="col-sm-8">
                                            <input name="linkMan" onkeyup='value=value.replace(/[\d]/g,"")' th:value="${agentInfo.linkMan}"  placeholder="" class="form-control"  type="text" maxlength="10" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">手机号码：</label>
                                        <div class="col-sm-8">
                                            <input name="linkPhoneEncryption" readonly onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" th:value="${agentInfo.linkPhoneEncryption}"  placeholder="" class="form-control"  type="text"   required>
                                            <input name="linkPhone" readonly  th:value="${agentInfo.linkPhone}" minlength="11" maxlength="11" placeholder="" class="form-control"  type="hidden"   required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">联系人邮箱：</label>
                                        <div class="col-sm-8">
                                            <input name="linkEmail" th:value="${agentInfo.linkEmail}" placeholder="" class="form-control"  type="text" maxlength="30"  >
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h4 class="form-header h4" >账户信息</h4>
                            <div class="row">
                                <div class="col-sm-6" >
                                    <div class="form-group">
                                        <label  class="col-sm-4 control-label is-required">账户类型：</label>
                                        <div class="col-sm-8">
                                            <select  name="nature" id="nature" onchange="accountType()" class="form-control m-b" th:with="type=${@dict.getType('zd_nature')}">
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${dict.dictValue} eq ${accounts.nature}"></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">预留手机号：</label>
                                        <div class="col-sm-8">
                                            <input name="showResphone"  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"  th:value="${accounts.resphone}"  maxlength="11" placeholder="" class="form-control"  type="text"   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">开户银行账户：</label>
                                        <div class="col-sm-8">
                                            <input name="showScreennum"   th:value="${accounts.screenNum}"  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="" class="form-control"  type="text"   required>
                                        </div>
                                    </div>
                                </div>
                                <!--选择对公账户 没有结算人身份照号-->
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">开户账户名称：</label>
                                        <div class="col-sm-8">
                                            <input name="screenName"  th:value="${accounts.screenName}" placeholder="" class="form-control"  type="text" maxlength="30"  required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6"  id="card">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">结算人身份证号：</label>
                                        <div class="col-sm-8">
                                            <input name="showScreenidnum"   maxlength="18" th:value="${accounts.screenIdnum}" placeholder=""  class="form-control"  type="text"   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">总行名称：</label>
                                        <div class="col-sm-8">
                                            <input name="bankHeadname" th:value="${accounts.bankHeadname}"  id="selectZh" readonly="readonly"  onclick="openZh()" placeholder="选择总行" class="form-control"  type="text" maxlength="30"/>
                                            <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">支行名称：</label>
                                        <div class="col-sm-8">
                                            <input name="bankName" th:value="${accounts.bankName}" id="branch_bank" onclick="openZhihang()" readonly="readonly" placeholder="选择支行" class="form-control"  type="text" maxlength="30"  required>
                                            <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">账户开户地：</label>
                                        <div class="col-sm-2" style="width: 130px;">
                                            <select id="province1" name="province1" onchange="javascript:window.province1('p')" class="province form-control m-b" >
                                                <option th:each="p1:${pList1}" th:text="${p1.areaName}" th:value="${p1.areaCode}"  th:selected="${p1.areaCode} eq ${province1}"></option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2" style="width: 130px;">
                                            <select id="city1" name="city1" onchange="javascript:window.province1('c')" class="city form-control m-b" >
                                                <option th:each="c1:${cList1}" th:text="${c1.areaName}" th:value="${c1.areaCode}"  th:selected="${c1.areaCode} eq ${city1}"></option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2" style="width: 128px;">
                                            <select id="area1" name="area1" onchange="javascript:window.province1('a')" class="area form-control m-b">
                                                <option th:each="a1:${aList1}" th:text="${a1.areaName}" th:value="${a1.areaCode}"  th:selected="${a1.areaCode} eq ${area1}"></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">支付系统行号：</label>
                                        <div class="col-sm-8">
                                            <input name="bankNum" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" id="bankNum" th:value="${accounts.bankNum}" placeholder="" class="form-control"  type="text" maxlength="30"  >
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h4 class="form-header h4">其他信息</h4>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">销售经理：</label>
                                        <div class="col-sm-8">
                                            <input type="text"   name="sm_name2" th:value="${agentInfo.smName == null ? '':agentInfo.smName}" id="sm_name2" readonly="readonly" onclick="openXs('xs')" placeholder="选择销售经理" class="form-control"   maxlength="30"  >
                                            <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
                                            <input type="hidden" name="sm_num2" id="sm_num2" th:value="${agentInfo.smNum == null ? '':agentInfo.smNum}">
                                        </div>
                                        <!--/salesman/salesman-->
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">运营经理：</label>
                                        <div class="col-sm-8">
                                            <input type="text"   th:value="${agentInfo.smName1 == null ? '':agentInfo.smName1}" name="sm_name1"  id="sm_name1" readonly="readonly" onclick="openYy('yy')" placeholder="选择运营经理" class="form-control"   maxlength="30"  >
                                            <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>
                                            <input type="hidden" name="sm_num1" id="sm_num1" th:value="${agentInfo.smNum1 == null ? '':agentInfo.smNum1}">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">有效期：</label>
                                        <div class="input-daterange input-group" >
                                            <input   name="beginValid"  th:value="${agentInfo.beginValid}" style="margin-left: 14px;width: 170px;" type="text" class="input-sm form-control" id="laydate-startTime" placeholder="起始日期"/>
                                            <span style="margin-right: 5px;" class="input-group-addon">-</span>
                                            <input   name="endValid"  th:value="${agentInfo.endValid}" style="width: 150px;" type="text" class="input-sm form-control" id="laydate-endTime" placeholder="结束日期"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          <!--  <h4 class="form-header h4">服务商登录信息</h4>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label is-required">登录账号：</label>
                                        <div class="col-sm-8">
                                            <input name="adminName" th:value="${adminName}" placeholder="" class="form-control"  type="text" maxlength="30"  required>
                                        </div>
                                    </div>
                                </div>
                            </div>-->
                        </form>
                    </fieldset>
                </div>
            </div>
                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: utils-js" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    $(function(){
        <!-- laydate示例 -->
       /* layui.use('laydate', function(){
            var laydate = layui.laydate;

            var startDate = laydate.render({
                elem: '#laydate-startTime',
                max: $('#laydate-endTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 结束时间大于开始时间
                    if (value !== '') {
                        endDate.config.min.year = date.year;
                        endDate.config.min.month = date.month - 1;
                        endDate.config.min.date = date.date;
                    } else {
                        endDate.config.min.year = '';
                        endDate.config.min.month = '';
                        endDate.config.min.date = '';
                    }
                }
            });

            var endDate = laydate.render({
                elem: '#laydate-endTime',
                min: $('#laydate-startTime').val(),
                theme: 'molv',
                trigger: 'click',
                done: function(value, date) {
                    // 开始时间小于结束时间
                    if (value !== '') {
                        startDate.config.max.year = date.year;
                        startDate.config.max.month = date.month - 1;
                        startDate.config.max.date = date.date;
                    } else {
                        startDate.config.max.year = '';
                        startDate.config.max.month = '';
                        startDate.config.max.date = '';
                    }
                }
            });
        });*/
    });

    var url = "/agentInfo/agentInfo";
    function submitHandler() {
       if ($.validate.form()) {
           var form = $.form.getField($("#form-agent-add").serializeArray());
           //验证
           /*if(!$.vali.valiPhone(form.resphone) || !$.vali.valiPhone(form.linkPhone)){
               $.modal.msgError("请输入正确的手机号");
               return;
           } else if (!$.vali.valiCard(form.identityNum)){
               $.modal.msgError("请输入正确的法人身份证号");
               return;
           } else if (!$.vali.valiEmail(form.linkEmail)){
               $.modal.msgError("请输入正确的邮箱");
               return;
           } else if ($("#nature").find("option:selected").val() == '2'){
               //对私验证身份照
               if (!$.vali.valiCard(form.screenIdnum)){
                   $.modal.msgError("请输入正确的结算人身份证号");
                   return;
               }
           } else

            if (!$.vali.bankCard(form.screenNum)){
               $.modal.msgError("请输入正确的开户银行账户");
               return;
           } else
           */
           if ($("#sm_name2").val().length == 0) {
               $.modal.msgError("销售经理不能为空");
               return;
           } else if ($("#sm_name1").val().length == 0) {
               $.modal.msgError("运营经理不能为空");
               return;
           } /*else if (!$.vali.id(form.organCode)){
               $.modal.msgError("请输入有效的统一社会信用代码");
               return;
           }*/
           form.areaName = $("#province option:selected").text() + "," + $("#city option:selected").text() + "," + $("#area option:selected").text();
           form.areaName1 = $("#province1 option:selected").text() + "," + $("#city1 option:selected").text() + "," + $("#area1 option:selected").text();
             $.operate.save(ctx + "agentInfo/agentInfo/update", form);
        }
    }


    /**
     * 总行
     */
    function openZh(){
        $.modal.open("选择总行", ctx + "agentInfo/agentInfo/selectZh","1100","500");
    }

    /**
     * 销售
     */
    function openXs(obj){
        $.modal.open("选择销售经理", ctx + "agentInfo/agentInfo/jl?obj=" + obj,"1100","500");
    }

    /**
     * 运营经理
     */
    function openYy(obj){
        $.modal.open("选择运营经理", ctx + "agentInfo/agentInfo/jl?obj=" + obj,"1100","500");
    }

    /**
     * 运营支行
     */
    function openZhihang(){
        if($("#selectZh").val().length == 0){
            layer.msg('请先选择总行',{icon: 2,time:1000});
            return;
        }
        $.modal.open("选择支行", ctx + "agentInfo/agentInfo/zhihang?head_bank="+$("#selectZh").val(),"1100","500");
    }






    /**
     *
     * @param type 传入 省 p 市 c 区 a
     */
    function province(type) {
        var url = ctx +"area/area/list"; //获取地址信息
        if (type == 'p'){  //联动市
            if($("#province").find("option:selected").val() == ''){
                defaultOption("city","选择市");
                defaultOption("area","选择区");
            } else {
                $.post(url,{'parentId':$("#province").val(),'areaType':'1'},function(result){
                    if (result.code == '0'){
                        initSelect("city",result,"area");
                    }
                });
            }
        } else if (type == 'c'){  //联动县
            $.post(url,{'parentId':$("#city").val(),'areaType':'2'},function(result){
                if (result.code == '0',result){
                    initSelect("area",result);
                }
            });
        }
    }

    /**
     *
     * @param type 传入 省 p 市 c 区 a
     */
    function province1(type) {
        var url = ctx + "area/area/list"; //获取地址信息
        if (type == 'p'){  //联动市
            //当前省选择请选择时 后面两个清空选中状态
            if($("#province1").find("option:selected").val() == ''){
                defaultOption("city1","选择市");
                defaultOption("area1","选择区");
            } else {
                $.post(url,{'parentId':$("#province1").val(),'areaType':'1'},function(result){
                    if (result.code == '0'){
                        initSelect("city1",result,"area1");
                    }
                });
            }
        } else if (type == 'c'){  //联动县
            $.post(url,{'parentId':$("#city1").val(),'areaType':'2'},function(result){
                if (result.code == '0',result){
                    initSelect("area1",result);
                }
            });
        }
    }

    //初始化 select选项
    /**
     * selectId 省
     * data  数据
     * area 地区
     * */
    function initSelect(selectId,data,area) {
        //清空旧的数据
        if (selectId != 'province'){
            $("#"+selectId).empty();
            $("#"+area).empty();
        } else if (selectId != 'province1'){
            $("#"+selectId).empty();
            $("#"+area).empty();
        }
        var option = '<option value="">请选择</option>';
        data.rows.forEach(function(value){
            option += "<option value='"+value.areaCode+"'>"+value.areaName+"</option>";
        });
        $("#"+selectId).append(option);
        $("#"+area).append(option);

    }

    //初始化 select选项
    function defaultOption(selectId,text) {
        $("#"+selectId).empty();
        $("#"+selectId).append("<option value=''>" + text +"</option>");
    }

    /**
     * 初始化对公对私类型隐藏展示
     * */
    var  changeAccountType = function () {
        var nature = $("#nature").find("option:selected").val();
        //对公
        if (nature == '1'){
            $("#card").hide();
            //对私
        } else if (nature == '2'){
            $("#card").show();
        }
    }();


    /**
     * 账户对公对私变动
     * 1、对公 2、对私
     * 对公没有身份账号 和 结算人
     */
    function accountType() {
        var nature = $("#nature").find("option:selected").val();
        //对公
        if (nature == '1'){
            $("#card").hide();
            //对私
        } else if (nature == '2'){
            $("#card").show();
        }
    }


</script>
</body>
</html>